<template>
  <div class="sys_log">
    <p class="log_font" v-for="item in msgList" :key="item">{{ item }}</p>
  </div>
</template>

<script>
import { getLog } from '@/api/SystemLogApi'
import resize from '@/util/resize'
export default {
  // mixins: [resize],
  name: "SystemLog",
  data(){
    return{
      msgList: [],
      interval: {},
      data: ''
    }
  },

  created() {
    this.log()
    // this.interval = setInterval(this.log, 10 * 1000);
  },

  methods: {
    log(){
      getLog().then(res => {
        console.log(res)
        var data = res.data;
        // var msgList = this.msgList;
        // msgList.push(data)
        // this.msgList = Array.from(new Set(msgList))
        this.msgList = data
      }).catch().finally()
    }
  },

  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<style scoped>
.sys_log{
  width: 40%;
  height: 25rem;
  border-radius: .5rem;
  background: rgba(255,255,255,0.5);
  float: left;
  position: absolute;
  top: 53%;
  overflow-x: auto;
  overflow-y: auto;
}

.log_font{
  width: 100%;
  text-align: left;
  font-size: .5rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bolder;
  margin-bottom: 3%;
}
</style>